import MysqlIcon from "@/pages/data-collect/data-source/icon/MysqlIcon";
import {
  FormOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
  SwapOutlined,
} from "@ant-design/icons";
import { Alert } from "antd";
import { Button, Select, Tooltip } from "knowdesign";
import "./index.less";

const Index = () => {
  const dashLine = (
    <div className="connection dc-ui-flow-connection ">
      <div className="canvas-wrap">
        <div className="canvas-content flow-connection-content-1725687900057-0">
          <div
            style={{
              position: "relative",
              width: "auto",
              height: "auto",
              padding: 0,
              margin: 0,
              borderWidth: 0,
              cursor: "default",
            }}
          >
            <div className="container">
              <div className="red-dot"></div>
              <div className="dashed-line"></div>
              <div>
                <Button
                  // type="primary"
                  shape="round"
                  icon={<SwapOutlined style={{ paddingLeft: 8 }} />}
                  size="small"
                  style={{ padding: "0 8px" }}
                >
                  <span style={{ fontSize: 10 }}>测试</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                </Button>
              </div>
              <div className="dashed-line"></div>
              <div className="di-arrow-right-triangle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const netItem = (
    <div className="container-wrap">
      <div>
        <div className="di-collapse-panel-wrapper">
          {/* header */}
          <div className="di-collapse-panel-header">
            <div style={{ alignItems: "center", display: "flex" }}>
              <span className="di-collapse-panel-header-title">
                <span className="di-header-title-selector" title="数据来源">
                  数据来源
                </span>

                <span className="di-header-title-selector" title="MySQL">
                  MySQL
                </span>
              </span>
            </div>

            <div>
              <Button type="primary" icon={<PlusOutlined />} size="small">
                新建
              </Button>
            </div>
          </div>
          {/* list */}
          <div className="dc-collapse">
            <div className="dc-collapse-panel dc-collapse-panel-expanded dc-collapse-panel-disabled di-sharding-table-panel">
              <div className="dc-collapse-panel-title">
                <div className="di-card-title-wrapper">
                  <div className="di-card-title">
                    <div
                      style={{
                        border: "1px solid #e4e6f2",
                        padding: "0 0.3vh",
                      }}
                    >
                      <MysqlIcon />
                    </div>
                    <div>
                      <Select
                        size="small"
                        style={{ width: "14vh" }}
                        placeholder="请选择"
                      />
                      <Tooltip title="仅显示MySQL类型的数据源，如果您建立过其他类型的数据源，不会在此处显示。">
                        <QuestionCircleOutlined style={{ marginLeft: "1vh" }} />
                      </Tooltip>
                    </div>
                  </div>
                </div>
              </div>
              {/* list */}
              <div className="dc-collapse-panel-content">
                <div className="di-collpase-panel-content">asdfasd</div>

                <div>
                  <Alert
                    message="数据来源：可联通"
                    type="success"
                    showIcon
                    style={{ width: "70%" }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <>
      <div className="di-network-config-panel-new-content">
        <div className="flow-container dc-ui-flow-container flow-container-id-1725687400656 ">
          <div style={{ width: "20%" }}>{netItem}</div>

          <div style={{ width: "20%" }}>{dashLine}</div>

          <div style={{ width: "20%" }}>{netItem}</div>

          <div style={{ width: "20%" }}>{dashLine}</div>

          <div style={{ width: "20%" }}>{netItem}</div>
        </div>
      </div>
    </>
  );
};

export default Index;
